<template>
  <div class="app-container">
    <div class="content">
      <div class="lgm-search">
        <el-form
          ref="form"
          :model="searchParams"
          label-width="100px"
          class="search-form"
        >
          <el-form-item label="日期">
            <el-date-picker
              v-model="searchParams.time1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>

          <el-row>
            <el-button
              type="success"
              class="lgm-search-btn"
              icon="el-icon-search"
              @click="seach"
              >搜索</el-button
            >
            <el-button
              class="lgm-reset-btn"
              icon="el-icon-refresh"
              @click="reset"
              >重置</el-button
            >
          </el-row>
        </el-form>
      </div>

      <div class="table">
        <el-table :data="dataList" border>
          <el-table-column
            prop="id"
            label="ID"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="created_at"
            label="日期"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="money"
            label="收入金额"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="store_name"
            label="门店名称"
            align="center"
          ></el-table-column>
          
          <el-table-column
            prop="legal_person"
            label="老板姓名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="nickname"
            label="用户名称"
            align="center"
          ></el-table-column>

         
    
        </el-table>
      </div>
      <div class="lgm-page-wrap">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :page-sizes="[10, 100, 200, 300, 400]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
   
  </div>
</template>

<script>
import {
  clothing_categoryAdmin,
  styleAdmin,
  colorAdmin,
  sizeAdmin,
  my_extend,
} from "@/api/admin";

export default {
  name: "StyleManage",
  data() {
    return {
      page: 1,
      page_size: 10,
      total: 0,
      detail: {},
      clothing_categoryAdminList: [],
      styleAdminList: [],
      sizeList: [],
      colorList: [],

      searchParams: {
        type: "",
        start_time: "",
        end_time: "",
        time1: "",
        delivery_number: "",
      },
      detailForm: {
        type: "1",
        money: "",
        remarks: "",
      },
      rules: {},
      srcList: [
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      ],
      dataList: [],
      dialogVisible: false,
    };
  },
  mounted() {
    this.my_extendFn();
  },
  methods: {
    handleSizeChange(value) {
      this.page_size = value;
      this.my_extendFn();
    },
    handleCurrentChange(value) {
      this.page = value;
      this.my_extendFn();
    },
    my_extendFn() {
      let obj = this.searchParams;
      if (this.searchParams.time1) {
        obj["start_time"] = this.formatDate(this.searchParams.time1[0]);
        obj["end_time"] = this.formatDate(this.searchParams.time1[1]);
      }
      my_extend(
        {
          page: this.page,
          page_size: this.page_size,
          ...obj,
        },
        "GET"
      ).then((e) => {
        console.log(e.data.list);
        this.dataList = e.data.list;
        this.total = e.data.total;
      });
    },
    dialogConfirm() {
      console.log(this.detailForm);
      my_extend(
        this.detailForm,
        this.detailForm.id ? "PATCH" : "POST",
        this.detailForm.id
      ).then((e) => {
        this.dialogVisible = false;
        this.seach();
      });
    },

    seach() {
      this.page = 1;
      this.my_extendFn();
    },
    reset() {
      for (let i in this.searchParams) {
        this.searchParams[i] = null;
      }
      this.seach();
    },

    addList() {
      this.detailForm = {
        type: "1",
        money: "",
        remarks: "",
      };
      this.dialogVisible = true;
    },
    handleEdit(idx, item) {
      my_extend(
        {
          id: item.id,
        },
        "GET",
        item.id
      ).then((e) => {
        this.detailForm = JSON.parse(JSON.stringify(item));

        this.dialogVisible = true;
      });
    },
    handleDelete(index, item) {
      this.$confirm("是否确认删除选中的?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        confirmButtonClass: "submitDeleteBtn",
        type: "warning",
      }).then(() => {
        my_extend({}, "DELETE", item.id).then((e) => {
          this.seach();
        });

        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },
    colorAdminFn() {
      colorAdmin(
        {
          page: 1,
          page_size: 1000,
        },
        "GET"
      ).then((e) => {
        this.colorList = e.data.list;
      });
    },
    sizeAdminFn() {
      sizeAdmin(
        {
          page: 1,
          page_size: 1000,
        },
        "GET"
      ).then((e) => {
        this.sizeList = e.data.list;
      });
    },
    clothing_categoryAdminFn() {
      clothing_categoryAdmin(
        {
          page: 1,
          page_size: 1000,
        },
        "GET"
      ).then((e) => {
        this.clothing_categoryAdminList = e.data.list;
      });
    },
    styleAdminFn() {
      styleAdmin(
        {
          page: 1,
          page_size: 1000,
        },
        "GET"
      ).then((e) => {
        this.styleAdminList = e.data.list;
      });
    },

    
    clickItem() {
      console.log(456);
    },
    formatDate(date) {
      const d = new Date(date);
      const year = d.getFullYear();
      const month = String(d.getMonth() + 1).padStart(2, "0"); // 月份从0开始
      const day = String(d.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    },
    staticdeliveryFn() {
      let obj = this.searchParams;
      if (this.searchParams.time1) {
        obj["start_time"] = this.formatDate(this.searchParams.time1[0]);
        obj["end_time"] = this.formatDate(this.searchParams.time1[1]);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.app-container {
  .content {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
  }

  .lgm-search {
    ::v-deep input {
      width: 210px;
    }
  }

  .info {
    display: flex;
    margin-bottom: 20px;

    .item {
      width: 220px;
      padding: 8px 15px;
      border: 1px solid #eee;
      border-radius: 6px;
      margin-right: 30px;

      .title {
        margin-bottom: 6px;
      }

      .box {
        width: 100%;
        height: 100px;
        border-radius: 6px;
        background-color: #fdf0e5;
        display: flex;
        align-items: center;
        justify-content: center;
        color: $fontColor;
        font-weight: bold;
        font-size: 18px;
      }
    }
  }
}
</style>
